/* Example
<div class="loadingdiv">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<div></div>
</div>
*/
.loadingdiv {
  height: 30px;
  display: block; }

.loadingdiv span {
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  background: #fff;
  border-radius: 3px;
  -webkit-animation: loading 0.8s infinite alternate;
  -moz-animation: loading 0.8s infinite alternate;
  margin-left: 5px; }

.loadingdiv div {
  height: 30px;
  display: inline-block;
  vertical-align: middle; }

.loadingdiv span:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s; }

.loadingdiv span:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s; }

.loadingdiv span:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s; }

.loadingdiv span:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s; }

@-webkit-keyframes loading {
  0% {
    height: 10px;
    -moz-transform: translateZ(0); }
  35% {
    height: 30px;
    -moz-transform: translateZ(-21px); }
  100% {
    height: 10px;
    -moz-transform: translateZ(0); } }

@-moz-keyframes loading {
  0% {
    height: 10px;
    -moz-transform: translateZ(0); }
  35% {
    height: 30px;
    -moz-transform: translateZ(-21px); }
  100% {
    height: 10px;
    -moz-transform: translateZ(0); } }
